<template>
  <!-- //! 模板当中用的时候会自动的加上 .value，不要手动加 -->
  <div>name: {{ name }} age: {{ age }}</div>
  <button @click="updateName">修改 name</button>
  <button @click="updateAge">修改 age</button>
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  setup() {
    // 问题
    // 第一：模板当中都要进行 person. 取值，麻烦！
    // 第二：实际上来说，模板中只用到了 name 和 age，但是你却把整个 person 对象都导出了，没需要
    const person = reactive({
      name: '张三',
      age: 18,
      address: '河南',
      sex: '男',
    })
    // !结构赋值简单数据类型，会使解构出来的数据丢失响应式
    // let { name, age } = person
    // 解决办法
    const name = toRef(person, 'name')
    const age = toRef(person, 'age')
    // console.log(name)
    const updateName = () => {
      // !注意在 JS 中修改的时候要加 .value
      // name 的修改也会影响原来的 person.name
      name.value = '李四'
      // 原来的修改也会影响转换后的 name
      // person.name = '李四'
    }
    const updateAge = () => {
      // !注意在 JS 中修改的时候要加 .value
      age.value = 20
      // person.age = 20
    }
    return {
      name,
      age,
      updateName,
      updateAge,
    }
  },
}
</script>
